<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .common_news_list {
            width: 600px;
            height: 135px;
            padding-left: 195px;
            position: relative;
            margin-top: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ddd;
            overflow: hidden;
        }

        .common_news_list .list_pic {
            position: absolute;
            width: 180px;
            height: 135px;
            left: 0;
            top: 0;
        }

        .common_news_list .list_pic img {
            width: 180px;
            height: 135px;
        }

        .common_news_list h4 {
            font-size: 18px;
            line-height: 20px;
            font-weight: bold;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0px;
        }

        .common_news_list h4 a {
            color: #444;
        }

        .common_news_list h4 a:hover {
            color: #1a4a7d;
        }

        .common_news_list p {
            font-size: 12px;
            color: #666;
            line-height: 22px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            /* 限制在三行 */
            overflow: hidden;
        }

        .new_info {
            overflow: hidden;
            margin-top: 20px;
        }

        .new_info .fa {
            margin: 0 4px 0 10px;
        }

        .new_info span {
            font-size: 12px;
            color: #999;
            float: left;
        }

        .new_info b {
            font-size: 12px;
            color: #999;
            float: right;
            font-weight: normal;
        }
    </style>
    <script>
        // 对于JS而言，html标签就是一个字符串
        let text = "变量text";
        // let tempStr = '<h1 style="color:red">内容</h1>';
        let tempStr = '<h1 style="color:red">' + text + '</h1>';
        document.write(tempStr)

        let infos = [
            {
                id: 6,
                title: "《光环》里逆天的止血道具，真的被搬到现实了",
                cover: "https://alioss.yystv.cn/doc/12035/d4d0ba3332284d668094e27fa94720a2.appmsg_w360",
                date: "2025-03-01",
                state: "已发布",
                author: "管理员",
                read: 821,
                categoryId: 5,
                comments: 36,
                category: "游戏趣闻",
                intro: "射击游戏里总有各种各样、奇奇怪怪的止血方式。尽管在应急止血领域，现代医学仍然还在延续使用了几百年的老套路：粉末吸血、施加压力、纱布包扎伤口。但在射击游戏里，角色已经用上了各种止血敷料、呼吸回血大法、肾上腺素……在《光环》这样的科幻题材的作品中，还会出现“自愈泡沫”这样更具想象力的道具。在《光环》系列...",
            },
            {
                id: 36,
                title: "今年最精彩的游戏混剪视频，它又来了！",
                cover: "https://alioss.yystv.cn/cover/df76e9c8b4de9231f9f7593dd32aa0dc.jpg_w360",
                date: "2025-03-01",
                state: "已发布",
                author: "管理员",
                read: 931,
                categoryId: 3,
                comments: 35,
                category: "经典回顾",
                intro: "\t去年年初，我们发布过一部6分钟剪了150个游戏的年度混剪视频，大受好评。然后我们也被催更了一年，不断有观众问下一期什么时候出。经过漫长的等待，它终于来了：依然是6分多钟，依然包含了上百个游戏。但这次我们还加入了一些人文气息，希望看过视频的你，能从这个难熬的严冬中走出来，拥抱春天。...",
            },
            {
                id: 11,
                title: "“任天堂历史上最失败的主机”，如何被推到台前",
                cover: "https://alioss.yystv.cn/doc/11163/665caa33bcd3ac39d84e799277f60502.jpeg_w360",
                date: "2025-02-28",
                state: "已发布",
                author: "管理员",
                read: 187,
                categoryId: 2,
                comments: 44,
                category: "游戏史料",
                intro: "1995年7月，任天堂推出了拥有3D立体显示器的便携式主机VB（Virtualboy），5个月后，该主机在日本宣布停产。VirtualBoy，收藏于游研档案馆，公众号回复“预约”可免费入馆参观实物它的销量不足百万，是任天堂最失败的主机。而任天堂销量第二差的主机WiiU，全球卖了1360万台。VB为什...",
            },
            {
                id: 19,
                title: "现存历史最长的角色扮演游戏公司之一：混沌元素简史（一）",
                cover: "https://alioss.yystv.cn/cover/dd0b8ad4391c1332b386175f96c30b3e.png_w360",
                date: "2025-02-28",
                state: "已发布",
                author: "管理员",
                read: 397,
                categoryId: 2,
                comments: 38,
                category: "游戏史料",
                intro: "混沌元素是现存历史最长的角色扮演游戏公司之一，本文作者于1996-1998年就职于这家公司，并致力于介绍业内各家公司的历史，让我们来看看他的个人心得与见解。1975年年初时，市面上只存在一款角色扮演游戏，那就是《龙与地下城》，因此混沌元素（Chaosium）（当时被称为TheChaosium）当年成...",
            },
            {
                id: 25,
                title:
                    "曾经有个抱着电脑却没游戏玩的时代，无聊的小孩甚至去玩一款编程软件",
                cover: "https://alioss.yystv.cn/cover/92eb8cf5a85279be67c7b67d868f38a4.jpg_w360",
                date: "2025-02-28",
                state: "已发布",
                author: "管理员",
                read: 102,
                categoryId: 3,
                comments: 29,
                category: "经典回顾",
                intro: "\t\t\t小海龟画图——年轻人的第一次编程。\t\t“repeat4[fd100rt90]”\t在一些拥有早年计算机阅历的朋友眼里，上面这串字符，会让他们条件反射地想到“正方形”——因为在当年的一个“画图软件”中输入上面的字段，就会得到一个边长100像素的正方形。\t这个“画图软件”名叫Logo，它其实是一种编...",
            },
        ];
        
        for (let i = 0; i < infos.length; i++) {
            let item = infos[i];
            let tempStr1 = '<div class="common_news_list">' +
                                '<a href="" class="list_pic">' +
                                    '<img src="' + item.cover + '" alt=""></a>' +
                                '<h4>' +
                                    '<a href="">' + item.title + '</a>' +
                                '</h4>' +
                                '<p>' + item.intro + '</p>' +
                                '<div class="new_info">' +
                                    '<span>' + item.category +
                                        '<i class="fa fa-eye"></i>阅读( '+ item.read +' )' +
                                        '<i class="fa fa-commenting"></i>评论( '+ item.comments +' )' +
                                    '</span>' +
                                    '<b>发布于 </b>' +
                                '</div>' +
                            '</div>';
            document.write(tempStr1)
        }

       
    </script>
</head>

<body>
    
    <!-- <div class="common_news_list">
        <a href="" class="list_pic">
            <img src="https://alioss.yystv.cn/doc/12035/d4d0ba3332284d668094e27fa94720a2.appmsg_w360" alt=""></a>
        <h4>
            <a href="">《光环》里逆天的止血道具，真的被搬到现实了</a>
        </h4>
        <p>射击游戏里总有各种各样、奇奇怪怪的止血方式。尽管在应急止血领域，
            现代医学仍然还在延续使用了几百年的老套路：粉末吸血、施加压力、
            纱布包扎伤口。但在射击游戏里，角色已经用上了各种止血敷料、呼吸回血大法、
            肾上腺素……在《光环》这样的科幻题材的作品中，还会出现“自愈泡沫”这样更具想象力的道具。
            在《光环》系列...
        </p>
        <div class="new_info">
            <span>
                标签：游戏趣闻
                <i class="fa fa-eye"></i>阅读( 821 )
                <i class="fa fa-commenting"></i>评论( 36 )
            </span>
            <b>发布于 2025-03-01</b>
        </div>
    </div> -->
</body>

</html>